﻿<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">
	<head>
		<meta name="author" content="Bonstio" />
		<meta name="website" content="http://bonstio.net/notes" />
		<meta name="description" content="Lots of sticky notes" />
		<meta name="version" content="0.1a" />
		<meta name="apiVersion" content="1.0" />
		<meta name="inline" content="true" />
		<meta name="debugMode" content="true" />
		<meta name="keywords" content="notes, todo, stickies, postit, list, reminder, tasks" />
		<!-- emulation files -->
		<link rel="stylesheet" type="text/css" href="http://www.netvibes.com/themes/uwa/style.css" />
		<script type="text/javascript" src="http://www.netvibes.com/js/UWA/load.js.php?env=Standalone" />
		<!-- end emulation files -->
		<title>Wed Stickies Mod v4.0</title>
		<widget:preferences>
			<preference name="title" type="text" label="Title" defaultValue="Web Stickies Mod v4.0" />
			<preference name="limit" type="range" label="Number of items to display" defaultValue="10" step="1" min="1" max="25" />
			<preference name="usedNotes" type="hidden" defaultValue="" />
			<preference name="note0" type="hidden" defaultValue="" />
			<preference name="note1" type="hidden" defaultValue="" />
			<preference name="note2" type="hidden" defaultValue="" />
			<preference name="note3" type="hidden" defaultValue="" />
			<preference name="note4" type="hidden" defaultValue="" />
			<preference name="note5" type="hidden" defaultValue="" />
			<preference name="note6" type="hidden" defaultValue="" />
			<preference name="note7" type="hidden" defaultValue="" />
			<preference name="note8" type="hidden" defaultValue="" />
			<preference name="note9" type="hidden" defaultValue="" />
		</widget:preferences>
		<script type="text/javascript">

		  /*
		  	Name: WSM Class
		  	Desc: Holds all non-note specific methods
		  */
		  		  		  
		  var WSM =
		  {
		 baseUrl: "http://webstickiesmod.googlecode.com/svn/trunk/",

			  tx: 0,
			  ty: 0,
			   
			   x: 0,
			   y: 0,
			   z: 1000,
			   
			//note being dragged or resized  
			note: null,
			   
		//array to hold all notes	   
		allNotes: new Array(),
		
			  createMethodReference:function(object, methodName)
			  {
				return function () { object[methodName].apply(object, arguments); };
			  },			
			  
			  addTitleLinks:function()
			  {
					var add = widget.createElement("a");
					add.setAttribute("href", "javascript:void(0)");
					add.onclick = WSM.addNote;
					add.setAttribute("class", "addNote");
					add.innerHTML = "add";
					
					var tidy = widget.createElement("a");
					tidy.setAttribute("href", "javascript:void(0)");
					tidy.onclick = null;
					tidy.setAttribute("class", "tidyNotes");
					tidy.innerHTML = "tidy";
					tidy.style.margin = "10px";
					
					widget.environment.handleLinks = function(){};
					
					var controls = widget.body.getElementsByClassName("controls")[0];
					UWA.$element(controls);
					controls.empty();
					controls.addContent(tidy);
					controls.addContent(add);
					
					
			  },
			  
			  addNote:function()
			  {
			  	  var slot = WSM.getSlot();
			  	  WSM.allNotes[slot] = new Note(slot);
				  WSM.allNotes[slot].render();
			  },
			  
			  getSlot:function()
			  {
				return WSM.allNotes.length;
			  },
			  
			  getMouse:function(obj, xy)
			  {
				
				if (!obj) return -1;
				var curtop = 0;
				
				if (obj.offsetParent)
				{
					while (obj.offsetParent)
					{
						curtop += (xy == "x") ? obj.offsetLeft : obj.offsetTop;
						obj = obj.offsetParent;
					}
				}
				else if (obj.y)
				{
					curtop += obj.y;
				}
				return curtop;
			  }		  
		  }
		  
		/*
		Some crude image pre-loading
		*/  
		
		imgCol = new Image();
	    imgCol.src = WSM.baseUrl + "images/col.png";
	
	    imgColHighlight = new Image();
	    imgColHighlight.src = WSM.baseUrl + "images/col_highlight.png";
	
	    imgPinDown = new Image();
	    imgPinDown.src = WSM.baseUrl + "images/pin_down.png";
	
	    imgPinDownHighlight = new Image();
	    imgPinDownHighlight.src = WSM.baseUrl + "images/pin_down_highlight.png";
	
	    imgPinUp = new Image();
	    imgPinUp.src = WSM.baseUrl + "images/pin_up.png";
	
	    imgPinUpHighlight = new Image();
	    imgPinUpHighlight.src = WSM.baseUrl + "images/pin_up_highlight.png";
	
	    imgClose = new Image();
	    imgClose.src = WSM.baseUrl + "images/x.png";
	
	    imgCloseHighlight = new Image();
	    imgCloseHighlight.src = WSM.baseUrl + "images/x_highlight.png";
	
	    imgMax = new Image();
	    imgMax.src = WSM.baseUrl + "images/max.png";
	
	    imgMaxHighlight = new Image();
	    imgMaxHighlight.src = WSM.baseUrl + "images/max_highlight.png";
	
	    imgMin = new Image();
	    imgMin.src = WSM.baseUrl + "images/min.png";
	
	    imgMinHighlight = new Image();
	    imgMinHighlight.src = WSM.baseUrl + "images/min_highlight.png";

	    imgResize = new Image();
	    imgResize.src = WSM.baseUrl + "images/resize.gif";		  
		  
		  /*
		  	Name: Note
		  	Desc: The note superclass used to render the note to the DOM
		  */
		  function Note(id)
		  {
			  //Id and type of note
			  this.id = id;
			  this.type = 0;
			  
			  //note dimensions
			  this.width = 100;
			  this.height = 100;
			  
			  //note position
			  this.x = 200;
			  this.y = 200;
			  
			  //min note size
			  this.xMin = 58;
			  this.yMin = 44;
			  
			  //note state
			  this.isMinimized = false;
			  
			  this.render = function(e)
			  {
					var note = this.getNoteBody();
					note.appendChild(this.getNoteTitle());
					note.appendChild(this.getTopIcons());
					note.appendChild(this.getResizeIcon());
					
					widget.body.appendChild(note);
			  };
			  
			  this.delete = function()
			  {
			  	
			  };
			  
			  this.minimize = function()
			  {
			  	
			  };
			  
			  this.maximize = function()
			  {
			  	
			  };
			  
			  this.dock = function()
			  {
			  	
			  };
			  
			  this.undock = function()
			  {
			  	
			  };
			  
			  this.changeCol = function()
			  {
			  	
			  };
			  
			  this.getNoteBody = function()
			  {
			  		var note = widget.createElement("div");
					note.setAttribute("class","Note_" + this.id);
					
					note.style.position = "absolute";
					note.style.display = "";
					note.style.visibility = "visible";
					note.style.border = "#c0c0c0 1px solid";
					note.style.overflow = "hidden";
					
					note.style.zIndex = WSM.z++;
					note.style.width = this.x + "px";
					note.style.height = this.y + "px";
					
					note.onmouseover = WSM.createMethodReference(this, "showTopIcons");
					note.onmouseout = WSM.createMethodReference(this, "hideTopIcons");
					
					return note;
			  };
			  
			  this.getTopIcons = function(e)
			  {
			  		var iconPlaceHolder = widget.createElement("div");
			  		iconPlaceHolder.setAttribute("class", "iconPlaceHolder_" + this.id);
			  		
			  		iconPlaceHolder.style.visibility = "hidden";
			  		iconPlaceHolder.style.position = "absolute";
			  		iconPlaceHolder.style.top = "1px";
			  		iconPlaceHolder.style.right = "1px";
			  		iconPlaceHolder.style.width = "56px";
			  		
			  		iconPlaceHolder.appendChild(this.getIcon(imgClose.src, imgCloseHighlight.src, "closeIcon_", "Delete this note", "delete"));
			  		iconPlaceHolder.appendChild(this.getIcon(imgMin.src, imgMinHighlight.src, "minMaxIcon_", "Minimize this note", "minimize"));
			  		iconPlaceHolder.appendChild(this.getIcon(imgCol.src, imgColHighlight.src, "colIcon_", "Change note colour", "changeCol"));
			  		iconPlaceHolder.appendChild(this.getIcon(imgPinDown.src, imgPinDownHighlight.src, "pinIcon_", "Dock this note", "delete"));
				  		
			  		return iconPlaceHolder;
			  };
			  
			  this.getResizeIcon = function(e)
			  {
			  		var resizeIcon = widget.createElement("div");
			  		resizeIcon.style.backgroundImage="url('" + imgResize.src + "')";
			  		resizeIcon.style.backgroundRepeat = "no-repeat";
			  	
				    resizeIcon.setAttribute("class", "resizeIcon_" + this.id);
				    resizeIcon.setAttribute("align", "right");
				    
				    resizeIcon.style.cursor = "se-resize";
				    resizeIcon.style.position = "absolute";
				    resizeIcon.style.bottom = "0px";
				    resizeIcon.style.right = "0px";
				    resizeIcon.style.width = "15px";
				    resizeIcon.style.height = "15px";
				    resizeIcon.style.display = "";
				    resizeIcon.innerHTML = "";
				    
				    resizeIcon.title = "Resize this note";
				    resizeIcon.onmousedown = WSM.createMethodReference(this, "onBeginResize");
				   				    
				    return resizeIcon;
			  } 
			  
			  this.showTopIcons = function(e)
			  {
			  		var iconPlaceHolder = widget.body.getElementsByClassName("iconPlaceHolder_" + this.id)[0];
			  		iconPlaceHolder.style.visibility = "visible";
			  };
			  
			  this.hideTopIcons = function(e)
			  {		  		
			  		var iconPlaceHolder = widget.body.getElementsByClassName("iconPlaceHolder_" + this.id)[0];
			  		iconPlaceHolder.style.visibility = "hidden";
			  		
			  };
			  
			  this.getIcon = function(imageSrc, altImageSrc, class, title, action, cursor)
			  {
				    var icon = widget.createElement("img");
				    icon.setAttribute("class", class + this.id);
				    icon.setAttribute("src", imageSrc);
				    icon.setAttribute("align", "right");
				    
				    icon.style.margin = "1px";
				    icon.style.cursor = "pointer";
				    
				    icon.title = title;
				    
				    icon.onclick = WSM.createMethodReference(this, action);
				    if (altImageSrc) icon.onmouseover = function() { icon.setAttribute("src", altImageSrc); };
				    icon.onmouseout = function() { icon.setAttribute("src", imageSrc); };		
				    
				    return icon;	  	
			  };			  			  			  
			  
			  this.getNoteTitle = function()
			  {
			  		var noteTitle = widget.createElement("input");
					
					noteTitle.setAttribute("class", "noteTitle_" + this.id);
					noteTitle.setAttribute("type", "text");
					
					noteTitle.style.width = "100%";
					noteTitle.style.border = "0px";
					noteTitle.style.cursor = "move";
					noteTitle.style.color = "#000000";
				
					noteTitle.onmousedown = WSM.createMethodReference(this, "onBeginDrag");
					
					return noteTitle;
			  };
			  
			  this.onBeginDrag = function(e)
			  {
				  var target = e ? e.target : event.srcElement;
				  
			  
				  while((target.className.indexOf("Note")) != 0)
				  {
				  		target = e ? target.parentNode : target.parentElement;
				  }

				  WSM.note = target;				  			  
				  
				  tx = WSM.getMouse(WSM.note, "x");
				  ty = WSM.getMouse(WSM.note, "y");
				  
				  x = e ? e.clientX : event.clientX;
				  y = e ? e.clientY : event.clientY;
				  
				  WSM.note.onmousemove = WSM.createMethodReference(this, "onDuringDrag");
				  WSM.note.onmouseup = WSM.createMethodReference(this, "onEndDrag");
				  
				  return false;
			  };	
			  		  
			  this.onDuringDrag = function(e)
			  {
				  e = e || window.event;
				  
				  var useLeft = tx + (e.clientX ? e.clientX : e.clientX) - x;
				  var useTop  = ty + (e.clientY ? e.clientY : e.clientY) - y;
				  
				  WSM.note.style.left = useLeft + "px";
				  WSM.note.style.top = useTop + "px";
				  
			  };
			  
		
			  this.onEndDrag = function(e)
			  {
				  if (WSM.note)
				  {
				  	WSM.note.onmousemove = null;
				  	WSM.note.onmouseup = null;	
				  	WSM.note = null;
				  }
				  
			  };
			  
			  	/*
			  		Object used for resizing
			  	*/
				function resizeObject()
				{
					//pointer to the object
				    this.el = null;
				    //type of current resize (n, s, e, w, ne, nw, se, sw)
				    this.dir = "";
				    //Some useful values
				    this.grabx = null;
				    this.graby = null;
				    this.width = null;
				    this.height = null;
				    this.left = null;
				    this.top = null;
				}		  
	  			  
			  this.onBeginResize = function(e)
			  {
				  var target = e ? e.target : event.srcElement;
			  	  e = e || window.event;
			  	  
				  while((target.className.indexOf("Note")) != 0)
				  {
				  		target = e ? target.parentNode : target.parentElement;
				  }
				  
				  WSM.note = new resizeObject();
				  WSM.note.el = target;
				  WSM.note.dir = "se-resize";
				  WSM.note.grabx = e.clientX;
				  WSM.note.graby = e.clientY;
				  WSM.note.width = target.offsetWidth;
				  WSM.note.height = target.offsetHeight;
				  WSM.note.left = target.offsetLeft;
				  WSM.note.top = target.offsetTop;		
				  
				  e.returnValue = false;
				  e.cancelBubble = true;
	
				  document.onmousemove = WSM.createMethodReference(this, "onDuringResize");
				  document.onmouseup =  WSM.createMethodReference(this, "onEndResize");			  		  
				  document.onmouseout =  WSM.createMethodReference(this, "onEndResize");		
			  };
			  
			  this.onDuringResize = function(e)
			  {
					if (!WSM.note) return;
					
					e = e || window.event;
					var newW = Math.max(this.xMin, WSM.note.width + e.clientX - WSM.note.grabx);
					var newH = Math.max(this.yMin, WSM.note.height + e.clientY - WSM.note.graby);
	        		
			        WSM.note.el.style.width = newW + "px";
			        WSM.note.el.style.height = newH + "px";
			        
			        e.returnValue = false;
			        e.cancelBubble = true;			            		
			  }

			  this.onEndResize = function(e)
			  {
			    if (WSM.note != null)
			    {
			
				  	WSM.note.onmousemove = null;	
				  	WSM.note.onmouseup = null;	
				  	WSM.note = null;
			    }			  	
			  }
			  
			  this.bringToFront = function()
			  {
			  	
			  }
		  }
      
		  widget.onLoad = function() 
		  {
		  	//disable _blank for new links
			var title = widget.getValue("title");
			widget.setTitle(title);
			WSM.addTitleLinks();
		  }				
      
      
		</script>
		<style type="text/css">
			.addNote
			{
				
			}
			
			.controls
			{
				text-align:right;
			}
		</style>
	</head>
	<body>
		<div class="controls">
		</div>
		<div class="dock">
			<span />
		</div>
	</body>
</html>
